<template>
	<view class="weather-wrap" :style="[weatherBg(nowData.code)]" @click="handleLocation">
		<view class="content-wrap">
			<view style="display: inline-block;">
				<view class="temp-wrap">
					<view class="num-wrap">
						<view v-if="nowData.temperature" class="temperature">
							{{nowData.temperature}}℃
						</view>
						<view v-if="nowData.temperature" class="text">
							/ {{nowData.text}}
						</view>
						<view v-else class="null-data"></view>
					</view>
				</view>
				<view class="city-wrap">
					<view class="city" style="display: flex;margin-left: 0.5rem">
						<u-icon name="map" color="#606266" size="16"></u-icon>
						<text class="city-name" v-if="nowData.city">
							{{nowData.city}}&nbsp;&nbsp;{{$u.timeFormat(nowData.time, 'mm-dd hh:MM')}}</text>
						<view v-else class="null-loc-wrap">
							<view>{{$tt('home.location')}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="img-wrap">
				<image :src="`/static/weather/${nowData.code}@1x.png`" style="width: 176rpx; height: 176rpx;"
					mode="aspectFit"></image>
			</view>
		</view>
		<view style="border: 1px solid rgba(0,0,0,0.05);"></view>
		<view class="bottom-wrap">
			<view class="item-wrap" v-for="(item,index) in nextData" :key="index">
				<view class="i-top-wrap">
					<view v-if="index===0" class="point">
					</view>
					<text>{{item.date_text}}</text>
					<text style="margin-left: 10rpx;">{{item.date}}</text>
				</view>
				<view class="i-bot-wrap">
					<image :src="'/static/weather/'+item.code_day+'@1x.png'" style="width: 50rpx; height: 50rpx;"
						mode="aspectFit"></image>
					<text v-if="item.high && item.low" style="margin-left: 30rpx;">{{item.high}}°/{{item.low}}°</text>
					<text v-else class="null-data"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	Date.prototype.formatCode = function(formatStr = "yyyy-MM-DD HH:mm:ss") {
		const paddingZero = num => num >= 10 ? num : '0' + num;
		let str = formatStr;
		str = str.replace(/yyyy|YYYY/, this.getFullYear());
		str = str.replace(/MM/, paddingZero(this.getMonth() + 1));
		str = str.replace(/dd|DD/, paddingZero(this.getDate()));
		str = str.replace(/hh|HH/, paddingZero(this.getHours()));
		str = str.replace(/mm/, paddingZero(this.getMinutes()));
		str = str.replace(/ss/, paddingZero(this.getSeconds()));
		str = str.replace(/SS/, paddingZero(this.getMilliseconds()));
		return str;
	};

	import projectConfig from '@/env.config.js';
	import QQMapWX from "@/common/qqmap-wx-jssdk.min.js";

	export default {
		name: 'weather',
		data() {
			return {
				// 天气数据
				nowData: {
					code: "10",
					temperature: "",
					text: "阵雨",
					city: "",
					time: ""
				},
				nextData: [{
					date_text: '今天',
					code_day: "10",
					date: "08/14",
					high: "",
					low: "",
				}, {
					date_text: '明天',
					code_day: "4",
					date: "08/15",
					high: "",
					low: "",
				}, {
					date_text: '后天',
					code_day: "4",
					date: "08/16",
					high: "",
					low: "",
				}]
			}
		},
		created() {
			// 由于权限问题，app 平台除外,其他平台自动定位
			// #ifndef APP-PLUS
			this.initData();
			// #endif

			// #ifdef APP-PLUS
			const location = uni.getStorageSync('location');
			if (location) {
				this.initData();
			}
			// #endif
		},
		computed: {
			weatherBg() {
				return icon => {
					if (icon >= '0' && icon <= '1') {
						return {
							background: 'linear-gradient( 50deg, #F8F9F3 0%, #FDD563 100%)'
						}
					}
					if (icon >= '2' && icon <= '12') {
						return {
							background: 'linear-gradient( 50deg, #E5F5FF 0%, #B1CEFE 100%)'
						}
					}
					if (icon >= '13' && icon <= '17') {
						return {
							background: 'linear-gradient( 50deg, #F1E7FD 0%, #9EABFF 100%)'
						}
					}
					if (icon >= '18' && icon <= '20') {
						return {
							background: 'linear-gradient( 50deg, #EEF0F2 0%, #E9EBF2 100%)'
						}
					}
					if (icon >= '21' && icon <= '30') {
						return {
							background: 'linear-gradient( 50deg, #E9EBF2 0%, #BCC4E0 100%)'
						}
					}
					if (icon >= '32' && icon <= '34') {
						return {
							background: 'linear-gradient( 50deg, #F8EEE4 0%, #F1D4B0 100%)'
						}
					}
					return {
						background: 'linear-gradient(235deg, #EEF5FF 0%, #D6DDEE 100%)'
					}
				}
			},
		},
		methods: {
			initData() {
				this.getLocation();
			},
			format(index) {
				var b = "";
				switch (index) {
					case 0:
						b = "星期日";
						break;
					case 1:
						b = "星期一";
						break;
					case 2:
						b = "星期二";
						break;
					case 3:
						b = "星期三";
						break;
					case 4:
						b = "星期四";
						break;
					case 5:
						b = "星期五";
						break;
					default:
						b = "星期六";
				}
				return b;
			},
			// 获取定位查询天气
			getLocation() {
				console.log('获取定位');
				let _this = this;
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						_this.getCurrWeather(res);
						_this.getNextWeather(res);
					},
					fail(e) {
						console.log(e);
						uni.showToast({
							title: '无法获取定位',
							icon: 'none'
						});
					}
				});
			},
			// 获取天气信息
			getCurrWeather(ad) {
				let _this = this;
				uni.request({
					url: 'https://api.seniverse.com/v3/weather/now.json',
					data: {
						key: projectConfig.XIN_ZHI_KEY,
						location: `${ad.latitude}:${ad.longitude}`,
					},
					success(res) {
						const { statusCode, data } = res;
						uni.showToast({
							image: '/static/right.png',
							title: data.results[0].now,
						})
						if (statusCode === 200) {
							_this.nowData = {
								...data.results[0].now,
								city: data.results[0].location.name,
								time: data.results[0].last_update
							};
							console.log(data, _this.nowData, '_this.nowData');
						} else {
							console.log('获取当前天气信息失败！');
						}
					},
					fail(err) {
						console.log('获取当前天气信息失败！', err);
					}
				});
			},
			getNextWeather(ad) {
				let _this = this;
				uni.request({
					url: 'https://api.seniverse.com/v3/weather/daily.json',
					data: {
						key: projectConfig.XIN_ZHI_KEY,
						location: `${ad.latitude}:${ad.longitude}`,
					},
					success(res) {
						const { statusCode, data } = res;
						if (statusCode === 200) {
							_this.nextData = _this.formNextData(data.results[0].daily);
							console.log(_this.nextData, '_this.nextData');
						} else {
							console.log('获取未来3天天气信息失败！');
						}
					},
					fail(err) {
						console.log('获取未来3天天气信息失败！', err);
					}
				});
			},
			formNextData(list) {
				return list.map((item, index) => ({
					...item,
					date: `${item.date.split('-')[1]}/${item.date.split('-')[2]}`,
					date_text: index === 0 ? '今天' : index === 1 ? '明天' : '后天',
				}))
			},
			// 点击界面获取定位
			async handleLocation() {
				// 权限问题，app 平台需要判断
				// #ifdef APP-PLUS
				const location = uni.getStorageSync('location');
				if (!location) {
					let result = await this.$store.dispatch("permission/requestPermissions", 'ACCESS_FINE_LOCATION');
					if (result !== 1) return;
					uni.setStorageSync('location', true);
				}
				// #endif
				// 其他平台直接获取定位
				this.getLocation();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.weather-wrap {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 36rpx;
		padding: 20rpx;
		height: 100%;
		box-sizing: border-box;

		.content-wrap {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 20rpx 10rpx;

			.temp-wrap {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				padding: 10rpx 0;

				.num-wrap {
					display: flex;
					flex-direction: row;
					height: 100rpx;

					.temperature {
						margin: 0.56rem 0.5rem 0;
						font-size: 76rpx;
					}

					.text {
						margin: 1.8rem 0.1rem 0;
						font-size: 34rpx;
					}
				}

				.img-wrap {
					display: flex;
					align-items: center;
				}
			}


		}

		.city-wrap {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0rpx;

			.city {
				font-size: 36rpx;

				.city-name {
					margin-left: 0.3rem;
					font-weight: 400;
					font-size: 26rpx;
					color: #7E7F79;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.null-loc-wrap {
					font-size: 28rpx;
					text-align: center;
					margin-left: 10rpx;

					.loc {
						margin-top: 6rpx;
						font-size: 22rpx;
						color: #888;
					}
				}
			}
		}

		.bottom-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			font-size: 28rpx;

			.item-wrap {
				display: flex;
				flex-direction: column;
				margin-top: 10rpx;
				background: rgba(255, 255, 255, 0.22);
				border: 1px solid rgba(255, 255, 255, 0.41);
				border-radius: 20rpx;
				padding: 10rpx;
				width: 28%;

				.i-top-wrap {
					display: flex;
					flex-direction: row;
					align-items: center;

					.point {
						width: 8rpx;
						height: 8rpx;
						background: #005EFF;
						margin-right: 10rpx;
					}
				}

				.i-bot-wrap {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 10rpx;
				}
			}
		}

		.null-data {
			border-bottom: 10rpx solid #000000;
			width: 60rpx;
			transform: scaleY(0.5);
			border-top-color: #000000;
			border-right-color: #000000;
			border-left-color: #000000;
			margin-left: 30rpx;
		}
	}
</style>